<script setup lang="ts">
import { MetergroupLabelItem } from '../../components/meter-group';

const datalists: MetergroupLabelItem[] = [
    { label: '系统', color: '#5EA4FF', value: 16 },
    { label: '软件', color: '#6CC77F', value: 8 },
    { label: '文档', color: '#F5A144', value: 24 },
    { label: '媒体', color: '#F46160', value: 10 }
];
</script>

<template>
    <div class="demotitle">MeterGroup（计量组）示例</div>
    <div class="demomain">
        <div class="demoitem">
            <div class="itemtitle">基本使用</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%">
                        <f-meter-group :datalist="datalists"></f-meter-group>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem">
            <div class="itemtitle">最大值max</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%">
                        <f-meter-group :datalist="datalists" :max="200"></f-meter-group>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem" style="width: 33.3%">
            <div class="itemtitle">仪表组方向（"horizontal" | "vertical"）</div>
            <div class="card" >
                <div style="display: flex;height: 100%;">
                    <div style="height: 100%">
                        <f-meter-group :datalist="datalists" orientation="vertical"></f-meter-group>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem" style="width: 33.3%">
            <div class="itemtitle">仪表组文本标签方向（"horizontal" | "vertical"）</div>
            <div class="card" >
                <div style="display: flex;height: 100%;">
                    <div style="height: 100%">
                        <f-meter-group :datalist="datalists" orientation="vertical"
                        labelOrientation="vertical"></f-meter-group>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem" style="width: 33.3%">
            <div class="itemtitle">仪表组文本标签位置（"start" | "end"）</div>
            <div class="card" >
                <div style="display: flex;height: 100%;">
                    <div style="width: 100%">
                        <f-meter-group :datalist="datalists" orientation="horizontal"
                        labelOrientation="horizontal" labelPosition="start"></f-meter-group>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<style type="scss" scoped>
.demotitle {
    padding: 10px;
    font-size: 28px;
    font-weight: 600;
    color: #333333;
}

.demomain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .demoitem {
        width: 50%;
        padding: 10px;

        .itemtitle{
            font-size: 1.25rem;
            color: #000;
            font-family: inherit;
            font-weight: 600;
            line-height: 1.2;
            margin: 1rem 0 1rem;
        }

        .card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            margin-bottom: 1rem;
            padding: 2rem
        }
    }
}
</style>